<%--
  Created by IntelliJ IDEA.
  User: Tong-dev
  Date: 2015-12-25
  Time: 18:05
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>Login Form</title>
    <meta name="layout" content="mui"/>
    <asset:javascript src="cookie"/>
    <script type="application/javascript">

        cookie("Z_MAIL_AUTH", true)

    </script>
    <style>
    .area {
        margin: 20px auto 0px auto;
    }

    .mui-input-group {
        margin-top: 10px;
    }

    .mui-input-group:first-child {
        margin-top: 20px;
    }

    .mui-input-group label {
        width: 22%;
    }

    .mui-input-row label ~ input,
    .mui-input-row label ~ select,
    .mui-input-row label ~ textarea {
        width: 78%;
    }

    .mui-checkbox input[type=checkbox],
    .mui-radio input[type=radio] {
        top: 6px;
    }

    .mui-content-padded {
        margin-top: 25px;
    }

    .mui-btn {
        padding: 10px;
    }

    .link-area {
        display: block;
        margin-top: 25px;
        text-align: center;
    }

    .spliter {
        color: #bbb;
        padding: 0px 8px;
    }

    .oauth-area {
        position: absolute;
        bottom: 20px;
        left: 0px;
        text-align: center;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .oauth-area .oauth-btn {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: 30px 30px;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0px 20px;
        /*-webkit-filter: grayscale(100%); */
        border: solid 1px #ddd;
        border-radius: 25px;
    }

    .oauth-area .oauth-btn:active {
        border: solid 1px #aaa;
    }

    .oauth-area .oauth-btn.disabled {
        background-color: #ddd;
    }
    </style>
</head>

<body>

<div class="mui-content">
    ${flash.error}
    <g:form name="login-form" action="index" class="mui-input-group">
        <div class="mui-input-row">
            <label>账号</label>
            <input id='username' name="username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
        </div>

        <div class="mui-input-row">
            <label>密码</label>
            <input id='password' name="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
        </div>

        <div class="mui-content-padded">
            <button type="submit" id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>

        </div>

        <div class="mui-content-padded oauth-area">

        </div>
    </g:form>

</div>

<script>


    (function ($, doc) {
        $.init({
            statusBarBackground: '#f7f7f7'
        });

    }(mui, document));
    dd.ready(function () {
        <dd:config agentId="13305008" nonceStr="abcdefg"
               jsApiList="['device.notification.alert', 'device.notification.confirm', 'biz.navigation.setLeft','biz.navigation.setIcon',
                           'biz.navigation.setRight', 'biz.navigation.setTitle', 'runtime.info','runtime.permission.requestAuthCode']"/>


        dd.biz.navigation.setTitle({
            title: '邮箱登陆',
            onSuccess: function (result) {

            },
            onFail: function (err) {
            }
        });
    });
</script>
</body>
</html>